<template>
  <div>
    <div class="flex justify-between">
      <div class="flex">
        <el-input
          v-model="storeName"
          style="width: 220px"
          clearable
          placeholder="请输入渠道门店名称进行搜索"
        />
        <el-button class="ml-10" type="primary" @click="searchHandle">搜索</el-button>
      </div>
      <el-button type="primary" @click="addChannel">新增</el-button>
    </div>

    <div class="mt-20">
      <PageTable :columns="columns" :data="dataSource" />
    </div>

    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getChannelStoreList"
    />
  </div>
</template>

<script>
import { STORE_TYPE } from '@/enum/coupon'
export default {
  name: 'ChannelList',
  components: {},
  props: {},
  data() {
    return {
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      storeName: '',
      dataSource: [],
      columns: [
        {
          label: '门店图片',
          render: (h, { row }) => {
            return <el-image src={row.storePicture} style={'width: 60px;height: 60px;'} />
          }
        },
        {
          prop: 'storeName',
          label: '门店名称',
          render: (h, { row }) => {
            return <div style={'color: #409eff'}>{row.storeName}</div>
          }
        },
        {
          label: '门店类型',
          render: (h, { row }) => {
            return <div style={'color: #409eff'}>{STORE_TYPE[row.storeType]}</div>
          }
        },
        {
          label: '联系人信息',
          render: (h, { row }) => {
            return (
              <div>
                <p>{row.contactName}</p>
                <p>{row.contactPhone}</p>
              </div>
            )
          }
        },
        {
          prop: 'address',
          label: '联系人地址'
        },
        {
          label: '核销张数',
          render: (h, { row }) => {
            return (
              <div>
                <p>{row.verificationNum}</p>
                <el-button type="text" onClick={() => this.goDetailHandle(row.id)}>
                  查看详情
                </el-button>
              </div>
            )
          }
        },
        {
          prop: 'sort',
          label: '排序'
        },
        {
          label: '是否显示',
          render: (h, { row }) => {
            return <div>{row.isShow ? '是' : '否'}</div>
          }
        },
        {
          prop: 'createdTime',
          label: '创建时间'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                {!row.isShow ? (
                  <el-button type="text" onClick={() => this.updatedStatus(row)}>
                    显示
                  </el-button>
                ) : (
                  <el-button type="text" onClick={() => this.updatedStatus(row)}>
                    隐藏
                  </el-button>
                )}
                <el-button type="text" onClick={() => this.updateChannel(row.id)}>
                  编辑
                </el-button>
                {!row.isShow ? (
                  <PopConfirm
                    text={'确认删除该渠道门店吗？'}
                    confirm={() => this.deleteChannelStore(row.id)}
                  >
                    <el-button class="ml-10" type="text">
                      删除
                    </el-button>
                  </PopConfirm>
                ) : (
                  ''
                )}
              </div>
            )
          }
        }
      ]
    }
  },
  created() {
    this.getChannelStoreList()
  },
  methods: {
    // 获取渠道列表
    async getChannelStoreList() {
      const params = {
        storeName: this.storeName,
        ...this.listQuery
      }
      const {
        data: { total, records }
      } = await this.$http.coupon.channelApi.getChannelStoreList(params)
      this.total = total
      this.dataSource = records
    },
    // 更新状态
    async updatedStatus({ isShow, id }) {
      let message = isShow ? '已隐藏' : '已启用'
      const { status, msg } = await this.$http.coupon.channelApi.updatedStatus({
        isShow: !isShow,
        id
      })
      if (status === 200) {
        this.getChannelStoreList()
        this.$message.success(message)
      } else {
        this.$message.error(msg)
      }
    },
    // 删除
    async deleteChannelStore(id) {
      const { status, msg } = await this.$http.coupon.channelApi.deleteChannelStore(id)
      if (status === 200) {
        if (this.dataSource.length === 1 && this.listQuery.pageNo > 1) {
          this.listQuery.pageNo--
        }
        this.getChannelStoreList()
        this.$message.success('删除成功！')
      } else {
        this.$message.error(msg)
      }
    },
    // 搜索
    searchHandle() {
      this.listQuery.pageNo = 1
      this.getChannelStoreList()
    },
    // 编辑
    updateChannel(id) {
      this.$router.push({ name: 'AddChannelStore', query: { id } })
    },
    // 新增
    addChannel() {
      this.$router.push({ name: 'AddChannelStore' })
    },
    // 核销记录
    goDetailHandle(id) {
      this.$router.push({ name: 'WriteOff', query: { id } })
    }
  }
}
</script>

<style lang="scss" scoped></style>
